<template>
    <div id="box1">
        <p id="p">注册</p>
        <div class="inp">
            <input 
                type="text" 
                placeholder="名字"
                v-model="data.name"
                @input="nameChange"
            >
            <span class="fa fa-user a"></span>
            <span  class="fa fa-check-square users" v-show="show[0]"></span>
        </div>
        <div class="inp">
            <input 
                type="text" 
                placeholder="邮箱"
                v-model="data.email"
                @input="emailInput"
            >
            <span class="fa fa-envelope user a"></span>
            <span  class="fa fa-check-square users" v-show="show[1]"></span>
        </div>
        <div class="inp">
            <input 
                type="text" 
                placeholder="密码"
                @input="pswInput"
                v-model="data.psw"
            >
            <span class="fa fa-lock a "></span>
            <span  class="fa fa-check-square users" v-show="show[2]"></span>
        </div>
        <div class="inp">
            <input 
                type="text" 
                placeholder="确认密码"
                @input="conInput"
                v-model="data.config"
            >
            <span class="fa fa-lock a"></span>
            <span  class="fa fa-check-square users" v-show="show[3]"></span>
        </div>
        <button id="btn" @click="btnClick" :disabled="!nums">注 册</button>
    </div>
</template>

<script>

export default {
    data:function(){
        return {
            data:{
                name:"",
                email:"",
                psw:"",
                config:"",
            },
            show:[
                false,
                false,
                false,
                false,
            ],
            nums:false,
        }
    },
    methods:{
        btnClick(){
            // console.log(this.data);
            this.http.get("/users/regist",{params:this.data})
            .then(res=>{
                if(!res.data.err){
                    // this.$store.dispatch("isLogin2");
                    window.location.href = "http://localhost:8080"; 
                }else{
                    
                    this.$vux.alert.show({
                        title:"注册失败",
                        content:res.data.msg,
                    });
                    this.data.email = "";
                }
            })

        },
        nameChange(){
            if(this.data.name.length>2&&this.data.name.length<8){
                this.show[0]=true;
            }else{
                this.show[0]=false;
            }
            this.num();
        },
        emailInput(){
            var reg = /^\w{1,}@\w{1,}.\w{1,}$/;
            this.show[1]=reg.test(this.data.email);
            this.num();
        },
        pswInput(){
            this.data.config = "";
            this.show[3]=false;
            if(this.data.psw.length>2&&this.data.psw.length<18){
                this.show[2]=true;
            }else{
                this.show[2]=false;
            }
            this.num();
        },
        conInput(){
            if(this.show[2]){
                this.show[3]=this.data.config==this.data.psw;
                this.num();
            }
            
        },
        num(){
            this.nums = this.show.every(s=>{
                return s
            })
        },
        bbb(){
            this.http.get("/users/isLogin")
            .then(res=>{
                if(!res.data.err){
                    window.location.href = "http://localhost:8080";
                }
            })
        },
    },
    activated:function(){
        this.bbb();
    }
}
</script>

<style scoped>
    #box1{
        padding: 20px;
    }
    #p{
        font-size: 26px;
        margin-top: 0;
    }
    .inp{
        margin: 4px;
        margin-bottom: 10px;
        position: relative;
        border: solid 1px #999;
        border-radius: 3px;
        padding: 1px 8px;
        padding-left: 40px;
        
    }
    .inp input{
        outline:none;
        width: 100%;
        height: 32px;
        border: none;
        font-size: 14px;
    }
    .inp:hover{
        border: solid 1px #2D93E8;
        /*color: black !important;*/
    }
    

    .a{
        position: absolute;
        top: 8px;
        left: 12px;
        color: #777;
    }
    .user{
        left: 10px;
    }
    .users{
        position: absolute;
        top: 8px;
        right: 8px;
        color: #1D9B72;
    }
    #btn{
        width: 97%;
        height: 35px;
        margin: 4px;
        border: solid 1px #2D93E8;
        background-color: #2D93E8;
        border-radius: 6px;
        color: white;
    }
    #btn:disabled{
        color: #666;
        border: solid 1px #999;
        background-color: #ccc;
    }
</style>